<template>
	<view>
		<view class="header-box">
			<head-left-nav text-content="健康大讲堂" :title-color="'#303133'" :is-back-show="false"></head-left-nav>
		</view>
		<view style="position: absolute;top: 160rpx;width: 100%;">
			<view style="height: 400rpx;">
				<view class="search">
					<view class="search_ipt flex alignC">
						<u-icon name="search" size="30" color="#BFBFBF" style="margin: 0 20rpx;"></u-icon>
						<u-input v-model="categoryTitleParam" placeholder="搜索医生、病症" style="width: 100%;"/>
					</view>
					<view class="search_btn flex fcenter" @tap="gotoSearch">搜索</view>
				</view>
				<!-- 轮播图开始 -->
				<view class="swiper_box">
					<u-swiper class="swiper" :list="bannerList" name="url" border-radius="16" height="258" width="690"
						img-mode="aspectFill"></u-swiper>
				</view>
			</view>
			<view class="scroll-view-container">
				<!-- 左侧的滑动区域 -->
				<scroll-view class="left-scroll-view" scroll-y="true" style="height: 100%;">
					<view v-for="(item, index) in deptList" :key="item.id" class="justify-center" style="margin: 20rpx 0;">
						<view :class="['left-scroll-view-item flex fcenter', index === active ? 'active' : '']"
							@click="deptFilter(index)">
							{{item.label}}
						</view>
					</view>
				</scroll-view>
				<!-- 右侧的滑动区域 -->
				<scroll-view scroll-y="true" :scroll-top="scrollTop" style="height: 100%;">
					<view class="grid_box" v-if="videoList.length">
						<view class="cate-lv2 " v-for="(item, index) in videoList" :key="item.subjectCode">
							<view class="item" @click="toVideoDetail(item.subjectCode)">
								<view v-if="item.uploadType == 1" class="right">
									<image :src="item.videoCover[0].url" mode=""></image>
								</view>
								<view v-else class="right">
									<video :controls="false" :show-fullscreen-btn="false" :show-play-btn="false" v-if="item.videoUrl"
										:show-center-play-btn="false" :src="item.videoUrl"></video>
								</view>
								<view>
									<view style="font-size: 24rpx;color: #000000;margin: 10rpx 0;">{{item.topicTitle}}</view>
									<view class="flex fjb" style="font-size: 20rpx;color: #8F8F8F;">
										<view>医师:{{ item.doctorName }}</view>
										<view>类别:{{ item.categoryName }}</view>
									</view>
								</view>
							</view>
						</view>
						
					</view>
					<view class="empty_box" v-else>
						<image src="/static/empty.png" mode=""></image>
						<text>暂无内容</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import headLeftNav from '@/components/HeadLeftNav.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getBannerApi
	} from '@/common/api/userInfoApi.js'
	import {
		getVideoListApi,
		getCateVideoListApi,
		getdeptListApi
	} from '@/common/api/lectureApi.js'
	import {
		getDictListApi
	} from '@/common/api/dictApi.js'
	export default {
		components: {
			headLeftNav
		},
		data() {
			return {
				deptList: [],
				videoList: [],
				bannerList: [],
				goodsList: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				active: 0,
				scrollTop: 0, //tab标题的滚动条位置
				finish: false,
				doctorName: '',
				topicTitle: '',
				categoryCode: '',
				categoryTitleParam: '',
				wh: 0,
				dictObj: {},
			}
		},
		computed: {
			...mapState('user', ['ylUserInfo', 'ylEnterprise'])
		},
		async onLoad() {
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight - 50
			await this.getBanner()
			await this.getdeptList()
			this.getVideoList()
		},
		async onShow() {
			this.videoList = []
			this.total = 0
			this.finish = false
			this.pageNum = 1
			await this.getDictObj('健康讲堂')
			await this.changeTabs(0)
		},
		methods: {
			// 获取视频分类的dictValue
			async getDictObj(name) {
				let res = await getDictListApi('videoType')
				console.log(res)
				if (res.status == 200) {
					let dictList = res.data[0].dictList
					this.dictObj = dictList.filter(item => item.dictValue == name)
				}
			},
			gotoSearch() {
				this.pageNum = 1
				this.videoList = []
				this.finish = false
				this.getVideoList()
			},
			toVideoDetail(subjectCode) {
				wx.navigateTo({
					url: `/subpkg/videoDetail/videoDetail?subjectCode=${subjectCode}`
				})
			},
			async getdeptList() {
				const r = await getdeptListApi()
				this.deptList = r.data
				this.categoryCode = this.deptList[0].id
			},
			async getBanner(callback) {
				console.log(this.ylEnterprise.enterpriseCode)
				const res = await getBannerApi(this.ylEnterprise.enterpriseCode)
				if (res.status === 200) {
					this.bannerList = res.data
				}
				callback && callback()
			},
			async deptFilter(index) {
				this.active = index
				if (this.categoryCode === this.deptList[index].value) return
				this.categoryCode = this.deptList[index].value
				this.pageNum = 1
				this.videoList = []
				this.finish = false
				this.getVideoList()
			},
			async getVideoList(callback) {
				if (this.finish) return
				//获取视频列表
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					categoryCode: this.categoryCode,
					uploadClassify: this.dictObj[0].dictKey,
					doctorName: '',
					topicTitle: '',
					categoryTitleParam: this.categoryTitleParam
				}
				const res = await getCateVideoListApi(params)
				// const res = await getVideoListApi(this.pageNum, this.doctorName, this.topicTitle, this.categoryCode, this.dictObj[0].dictKey,this.categoryTitleParam)
				if (!res.data.records.length) {
					this.finish = true
					return uni.$showToast('已经到底啦');
				}
				this.videoList.push(...res.data.records)
				callback && callback()
			},
		}
	}
</script>
<style>
	page {
		/* background: #fff; */
	}
</style>
<style lang="scss" scoped>
	.scroll-view-container {
		display: flex;
		height: calc(100vh - 610rpx);
		overflow: scroll;
		.left-scroll-view {
			width: 120px;
			// background: #F8F8F8;
			border-right: 1px solid #f8f8f8;
			.left-scroll-view-item {
				// background: #F8F8F8;
				// line-height: 60px;
				text-align: center;
				font-size: 24rpx;
				width: 120rpx;
				height: 58rpx;
				&.active {
					background-color: #3FBEBB;
					color: #fff;
					width: 120rpx;
					height: 58rpx;
					border-radius: 14rpx;
				}
			}
		}
	}

	.header-box {
		background: linear-gradient(180deg, #D5F0F0 0%, #FFF 100%);
		width: 100%;
		height: 654rpx;
		background-size: 100% 100%;
	}

	.grid_box {
		margin-left: 32rpx;
		display: grid;
		grid-template-columns: auto auto;
		/* 两列 */
		grid-template-rows: auto auto;
		/* 两行 */
		gap: 14rpx;

		/* 设置行间和列间距为10px */
		.item {
			width: 242rpx;
			// height: 180rpx;
			margin-bottom: 24rpx;
			.right{
				width: 242rpx;
				height: 180rpx;
				video{
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
				}
				image{
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
				}
			}
			
		}
	}

	.search {
		margin: 30rpx;
		position: relative;
		background: #FFF;
		height: 62rpx;
		border-radius: 35rpx;
		.search_ipt{
			width: 85%;
			height: 100%;
		}
		.search_btn {
			width: 96rpx;
			height: 46rpx;
			background: #3FBEBB;
			color: #FFFFFF;
			font-size: 24rpx;
			position: absolute;
			right: 8rpx;
			top: 8rpx;
			border-radius: 23rpx;
		}
	}
	.swiper_box {
		margin: 0 32rpx 32rpx;
	}
</style>